<template>
	<!-- 搜索商品和优惠券信息 -->
	<div>
		<el-form
			ref="form"
			:model="ruleForm"
			:rules="rules"
			:label-width="labelWidth + 'px'"
			size="mini"
		>
			<el-form-item label="商品链接" prop="url">
				<el-row>
					<el-col :span="20">
						<el-input
							placeholder="请输入商品链接"
							v-model="ruleForm.url"
							@input="input"
						></el-input>
					</el-col>
					<el-col :span="4">
						<el-button
							style="width:75px;margin-left:10px"
							type="success"
							:loading="couponLoading"
							@click="submitForm('form')"
							>检索</el-button
						>
					</el-col>
				</el-row>
			</el-form-item>
			<!-- <el-form-item label="优惠券链接" prop="couponUrl">
				<el-row>
					<el-col :span="20">
						<el-input
							placeholder="请输入商品优惠券链接"
							v-model="ruleForm.couponUrl"
							@input="input"
						></el-input>
					</el-col>
				</el-row>
			</el-form-item> -->
		</el-form>
		<!-- 商品信息 -->
		<div class="goods-info" v-if="showGoodsInfo">
			<div class="info-box">
				<div class="info-img">
					<img :src="goodsInfo.pic | image_ali" alt />
				</div>
				<div class="info-c">
					<div>
						<div>{{ goodsInfo.title }}</div>
						<div>月销量：{{ goodsInfo.sale }}件</div>
					</div>
					<div>{{ goodsInfo.shopName }}</div>
					<div>商品ID：{{ goodsInfo.gid }}</div>
					<div>
						<div>
							原价：
							<span>{{ goodsInfo.price }}</span>
						</div>
						<div>
							券面额：
							<span>{{ goodsInfo.couponMoney }}元券</span>
						</div>
						<div>
							券后价：
							<span>￥{{ goodsInfo.endPrice }}</span>
							（{{ goodsInfo.couponConditions }}）
						</div>
					</div>
					<div>
						优惠券有效期：{{ couponinfo.couponStarttime | dateFormatLine }} ~
						{{ couponinfo.couponEndtime | dateFormatLine }}
					</div>
				</div>
			</div>
		</div>

		<!-- 商品图片 -->
		<div class="goods-pics" v-if="goodsPics.length > 0">
			<ul>
				<li v-for="(item, index) in goodsPics" :key="index" @click="selectPic(item)">
					<img :src="item" />
				</li>
			</ul>
		</div>

		<!-- 优惠券信息 -->
		<div class="coupon-info" v-if="couponinfo.couponMoney">
			<div class="coupon-info-c">
				<div>
					优惠券金额：
					<span style="color:red">{{ couponinfo.couponMoney }}</span>
				</div>
				<div>
					优惠券数量：
					<span style="color:red">{{ couponinfo.couponNum }}</span>
				</div>
				<div>
					&nbsp;&nbsp; 已领取数量：
					<span style="color:red">
						{{ couponinfo.couponReceive }}
					</span>
				</div>
			</div>
			<div class="coupon-info-d">
				<div>
					优惠券id：
					<span style="color:red;margin-right:5px">
						{{ couponinfo.activityId }}
					</span>
					<i
						class="el-icon-copy-document"
						v-copy="couponinfo.activityId"
						title="复制商品名称"
					></i>
				</div>
			</div>
		</div>

		<!-- <div class="ul">
			<el-form label-width="120px">
				<el-row>
					<el-col :span="10">
						<el-form-item label="定金">
							<el-input size="mini" v-model="goodsInfo.quanMLink"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="立减">
							<el-input size="mini" v-model="goodsInfo.hzQuanOver"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div> -->
	</div>
</template>

<script>
export default {
	data() {
		return {
			ruleForm: {
				couponUrl: '',
				url: '',
				gid: ''
			},
			rules: {
				// url: [{ required: true, message: '请输入商品地址', trigger: 'blur' }],
				// couponUrl: [{ required: true, message: '请输入优惠券地址', trigger: 'blur' }],
			},
			showGoodsInfo: false,
			couponLoading: false,
			couponinfo: {},
			goodsInfo: {},
			preCommission: ''
		};
	},
	computed: {
		goodsPics() {
			return (this.couponinfo.taobaoImage || '').split(',').filter(Boolean);
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		item2: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 检索类型
		type: {
			type: [String, Number],
			default: ''
		},
		labelWidth: {
			type: [String, Number],
			default: 120
		}
	},
	watch: {
		item(val) {
			this.ruleForm.couponUrl = val.couponUrl;
		},
		'ruleForm.commissionRate'(val) {
			if (this.preCommission) {
				this.getPreCommission(val);
			}
		}
	},

	methods: {
		input() {
			// this.$emit('input', e);
		},
		getPreCommission() {
			this.$service.goodsMenagement.goods
				.getPreCommission({
					endPrice: this.goodsInfo.endPrice,
					commissionRate: this.ruleForm.commissionRate
				})
				.then(res => {
					this.preCommission = res;
					this.$emit('perface', res);
				});
		},
		searchGoods() {
			this.couponLoading = true;
			// if (!this.ruleForm.couponUrl) {
			// 	this.$message({
			// 		type: 'warning',
			// 		message: '请输入优惠券链接'
			// 	});
			// 	this.couponLoading = false;
			// 	return;
			// }
			this.$service.goodsMenagement.goods
				.checkGoods({
					couponUrl: this.ruleForm.couponUrl,
					url: this.ruleForm.url,
					gid: this.ruleForm.gidm,
					type: this.type
				})
				.then(res => {
					this.couponinfo = res;
					res.endPrice = res.endPrice.toFixed(2);
					this.goodsInfo = res;
					this.$emit('goodsInfo', res);
					this.couponLoading = false;
					this.showGoodsInfo = true;
					this.ruleForm.commissionRate = res.commissionRate;
					this.getPreCommission();
					this.$emit('select-pic', res.pic);
				})
				.catch(err => {
					this.$message.error(err);
					this.couponLoading = false;
				});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$emit('input', this.ruleForm);
					this.searchGoods();
				} else {
					this.$message({
						type: 'warning',
						// message: '商品和优惠券链接不能为空'
						message: '商品链接不能为空'
					});
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		selectPic(url) {
			this.goodsInfo.pic = url;
			this.$emit('select-pic', url);
		}
	}
};
</script>
<style lang="scss" scoped>
.coupon-info {
	padding: 0 30px;
	.coupon-info-c {
		@include flexBox(space-between, center);
	}
	.coupon-info-d {
		margin-bottom: 10px;
	}
}

.goods-pics {
	margin-bottom: 10px;

	ul {
		display: flex;
		justify-content: center;

		li {
			list-style: none;
			cursor: pointer;
			border: 1px solid #fff;
			margin-right: 10px;

			img {
				display: block;
				height: 60px;
				width: 60px;
			}

			&:hover {
				border-color: #f14d27;
			}
		}
	}
}

.goods-info {
	margin: 10px auto;
	.info-box {
		background-color: #fcfcfc;
		@include flexBox();
		padding: 0 30px;
		// padding-left: 20px;
		.info-img {
			width: 100px;
			height: 100px;
			flex-shrink: 0;
			border-radius: 10px;
			overflow: hidden;
			img {
				width: 100%;
			}
		}
		.info-c {
			margin-left: 10px;
			width: calc(100% - 110px);
			@include flexBox(space-between, center, column);
			line-height: 20px;
			font-size: $font12;
			color: $text-grey;
			& > div:nth-child(1) {
				@include text-title;
				@include ellipsis();
				@include flexBox(space-between, center);
				width: 100%;
				& > div:nth-child(1) {
					@include ellipsis();
					width: 500px;
				}
				& > div:nth-child(2) {
					font-weight: 400;
					font-size: $font12;
					color: $text-grey;
				}
			}
			& > div:nth-child(2) {
				color: #666666;
				width: 100%;
			}
			& > div:nth-child(3) {
				width: 100%;
			}
			& > div:nth-child(4) {
				width: 100%;
				@include flexBox(space-between, flex-start);
				div {
					color: $text-title;
				}
				span {
					color: #f14d27;
					font-size: $font14;
					font-weight: bold;
				}
			}
			& > div:nth-child(5) {
				width: 100%;
			}
		}
	}
}
.commissionrate-number {
	display: flex;
	justify-content: space-between;
	div {
		color: red;
	}
}
</style>
